<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 通时通次 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-date-picker class="mr10" v-model="query.time" type="date" range-separator="-" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
        <el-input v-model="query.kw" placeholder="请输入业务经理查询" class="handle-input mr10"></el-input>
        <el-button class="mr10" type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="souClick">刷新</el-button>
      </div>
      <el-table v-loading="tableLoad" :data="tableData" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="userName" label="业务经理" width="100"></el-table-column>
        <el-table-column prop="time1" label="9~10点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time1}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num1}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time2" label="10~11点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time2}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num2}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time3" label="11~12点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time3}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num3}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time4" label="12~13点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time4}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num4}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time5" label="13~14点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time5}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num5}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time6" label="14~15点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time6}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num6}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time7" label="15~16点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time7}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num7}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time8" label="16~17点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time8}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num8}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time9" label="17~18点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time9}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num9}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time10" label="18~19点" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time10}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num10}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time11" label="19点后" width="110">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.time11}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.num11}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dayTime" align="center" fixed="right" label="今日通话" width="130">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.dayTime}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.dayNum}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="weekTime" align="center" fixed="right" label="本周通话" width="130">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.weekTime}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.weekNum}} 通次</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="monthTime" align="center" fixed="right" label="本月通话" width="130">
          <template slot-scope="scope">
            <el-tag size="mini">{{scope.row.monthTime}}</el-tag>
            <el-tag size="mini" type="success">{{scope.row.monthNum}} 通次</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total,sizes, prev, pager, next" :current-page="query.page" :page-size="query.limit"
                       :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" :total="totalCount" :pager-count="5"
                       @size-change="handlePageSelectChange" @current-change="handlePageChange" @prev-click="handlePageChange"
                       @next-click="handlePageChange"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { getTeltime } from '../../../api/index';

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        time: "",
        kw: '',
      },
      totalCount: 0,
      tableLoad: false,

      tableData: [],
      multipleSelection: [],


    };
  },
  created() {
    this.query.time = this.getDate();
    this.getData();
  },
  methods: {
    //获取列表数据
    getData() {
      this.tableLoad = true;
      getTeltime({
        page: this.query.page,
        limit: this.query.limit,
        day: this.query.time ? this.query.time : this.getDate(),
        kw: this.query.kw
      }).then((res) => {
        this.tableLoad = false;
        if (res.code === 0) {
          res.recordList.map(item => {
            item.dayTime = this.formatTime(item.dayTime);
            item.monthTime = this.formatTime(item.monthTime);
            item.weekTime = this.formatTime(item.weekTime);
            item.time1 = this.formatTime(item.time1);
            item.time2 = this.formatTime(item.time2);
            item.time3 = this.formatTime(item.time3);
            item.time4 = this.formatTime(item.time4);
            item.time5 = this.formatTime(item.time5);
            item.time6 = this.formatTime(item.time6);
            item.time7 = this.formatTime(item.time7);
            item.time8 = this.formatTime(item.time8);
            item.time9 = this.formatTime(item.time9);
            item.time10 = this.formatTime(item.time10);
            item.time11 = this.formatTime(item.time11);
          })
          this.tableData = res.recordList;
          this.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页切换
    handlePageChange(val) {
      this.query.page = val;
      this.getData();
    },
    // 分页调整
    handlePageSelectChange(val) {
      this.query.limit = val;
      this.getData();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getData();
    },
    //获取当天日期
    getDate() {
      let currentDate = new Date();
      let year = currentDate.getFullYear();
      let month = currentDate.getMonth() + 1;
      let day = currentDate.getDate();
      let formattedDate = year + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day);
      return formattedDate;
    },
    //时间拆分
    formatTime(seconds) {
      let hour = Math.floor(seconds / 3600);
      let minute = Math.floor((seconds % 3600) / 60);
      let second = seconds % 60;
      return `${hour}时${minute}分${second}秒`
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
